<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>GET HIGH后台管理系统</title>

    <link rel="stylesheet" href="../css/index.css" />

    <style type="text/css">
        .js-select2 {
            text-align: center;
            border-radius: 10px;
            height: 30px;
            margin-right: 10px;
        }
        
        .line-seprate {
            height: 1px;
            width: 100%;
            background: #e5e5e5;
            border: none;
            margin-bottom: 0;
        }
        
        .container {
            max-width: 1320px;
        }
        
        .row {
            display: flex;
            justify-content: space-around;
            margin-right: -15px;
            margin-left: -15px;
            flex-wrap: wrap;
        }
        
        .statistic__item {
            border: 1px solid #e5e5e5;
            border-radius: 20px;
            background: #fff;
            padding: 20px 30px;
            position: relative;
            min-height: 180px;
            overflow: hidden;
            margin-bottom: 40px;
            min-width: 210px;
        }
        
        .statistic2 {
            padding-top: 50px;
        }
        
        .statistic-chart {
            margin-top: 20px;
        }
        
        .table-data__tool {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -moz-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            margin-bottom: 28px;
        }
        
        .table-data__tool-left {
            display: flex;
            align-items: center;
        }
        
        .rs-select2--light {
            margin-right: 20px;
        }
        
        .table-responsive {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .table-responsive table {
            width: 100%;
        }
        
        .table-responsive thead {
            color: white;
            background-color: black;
        }
        
        .table-responsive td {
            text-align: center;
        }
        
        .table-responsive-content-tr {
            height: 40px;
        }
        
        .table-responsive input {
            width: 20px;
            height: 20px;
        }
        
        .bcgcolor1 {
            background-color: white;
        }
        
        .bcgcolor2 {
            background-color: #eceff1
        }
        
        .color3 {
            background-color: #ff0000;
        }
        
        .color4 {}
        /*按钮点击效果*/
        
        .ripple {
            position: relative;
            /*隐藏溢出的径向渐变背景*/
            overflow: hidden;
        }
        
        .ripple:after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            /*设置径向渐变*/
            background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
            background-repeat: no-repeat;
            background-position: 50%;
            transform: scale(10, 10);
            opacity: 0;
            transition: transform .3s, opacity .5s;
        }
        
        .ripple:active:after {
            transform: scale(0, 0);
            opacity: .3;
            transition: 0s;
        }
        /*按钮点击效果*/
        
        button.deleteBtn{
			visibility: hidden;
		    padding: 0px;
		    background: content-box;
		    width: 300px;
		    color: white;
		    font-size: 20px;
		    border: 0px;
		    background-color: indianred;
		    border-radius:10px;
		}
	
		button.cancelBtn{
			visibility: hidden;
		    padding: 0px;
		    background: content-box;
		    width: 300px;
		    color: white;
		    font-size: 20px;
		    border: 0px;
		    background-color: cornflowerblue;
		    border-radius:10px;
		}
	
	button.deleteBtn:hover{color: black;background-color: lightblue;border: 0px;}
	button.deleteBtn:active{color: black;background-color: green;border: 0px;}
	button.cancelBtn:hover{color:black;background-color:lightblue;border:0px;}
	button.cancelBtn:active{color:black;background-color:green;border:0px;}
	
	
	a:visited{color:blue;text-decoration:none;}
	a:hover{color:red;text-decoration:underline;}
	a:active{color:green;text-decoration:underline;}
	
	.operation,.operation:hover{
		text-decoration:none;
	}
	
    </style>

    <!-- 引入 ECharts 文件 -->
    <script src="../js/echarts.js"></script>
	<script>
		function linkServlet(url){
			var linkResult = confirm("您确定要删除该商品吗？");
			if(linkResult){
				alert("删除成功！");
				window.location.href=url;
			}else{
				window.location.href="#";
			}
		}
	</script>

    <!-- 复选框js-->
    <script>
        function allSelect(check_v, checkname) {
            var v_item = document.getElementsByName(check_v);
            var items = document.getElementsByName(checkname);
            for (var i = 0; i < items.length; ++i) {
                if (v_item[0].checked) {
                    items[i].checked = true;
                } else {
                    items[i].checked = false;
                }
            }
        }

        function singleSelect2parent(check_v, checkname) {
            var v_item = document.getElementsByName(check_v);
            var items = document.getElementsByName(checkname);
            var childStatus = true;
            for (var i = 0; i < items.length; ++i) {
                childStatus = (childStatus && items[i].checked);
            }
            if (childStatus) {
                v_item[0].checked = true;
            } else {
                v_item[0].checked = false;
            }
        }
    </script>

</head>

<body style="background-color: #f7f7f7">
    <div style="padding-left: 2.5%; padding-right: 2.5%">
        <!-- WELCOME-->
        

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 官网提供的 axios 在线地址 -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <!-- 引入 main.js 文件 -->
        <script src="../js/main.js"></script>
        <!-- END WELCOME-->
        
        <div style="display: flex; justify-content: space-between; align-items: center;">
               <h1 class="title-4">Welcome back
                    <span>KID!</span>
               </h1>
        </div>

        <!-- STATISTIC-->
        <section class="statistic2">
            <div class="container">
                <div class="row">
                    <div class="statistic__item" style="background-color: #00b26f">
                        <h2 class="number" id="device_Number">0</h2>
                        <span class="desc">设备数量</span>
                        <img src="../image/home-total-sales.png" style="width: 100px; position: absolute; right: 10px; bottom: 10px">
                    </div>
                    <div class="statistic__item" style="background-color: #FF8300">
                        <h2 class="number" id="basketball_Number">0</h2>
                        <span class="desc">篮球租赁次数</span>
                        <img src="../image/场地租赁.png" style="width: 100px; position: absolute; right: 10px; bottom: 10px">
                    </div>
                    <div class="statistic__item" style="background-color: #00B5E9">
                        <h2 class="number" id="drink_Number" >0</h2>
                        <span class="desc">饮品售卖量</span>
                        <img src="../image/_补货数量统计.png" style="width: 100px; position: absolute; right: 10px; bottom: 10px">
                    </div>
                    <div class="statistic__item" style="background-color: #FA4251">
                        <h2 class="number" id="profit_All">￥0</h2>
                        <span class="desc" >总收益</span>
                        <img src="../image/售卖.png" style="width: 100px; position: absolute; right: 10px; bottom: 10px">
                    </div>
                </div>
            </div>
        </section>
        <!-- EDN STATISTIC-->
        
        <!-- DATA TABLE-->
        <section class="p-t-20" id="Search_app">
            <div class="container">
                <div class="" style="margin-left: 15px; margin-right: 15px; margin-bottom: 30px">
                    <div class="col-md-12">
                        <h1 class="" style="margin-bottom: 35px; font-size: xx-large;">数据表</h1>
                        <div class="table-data__tool">
                            <div class="table-data__tool-left">
                                <div class="rs-select2--light">
                                    选择表格：<select id="table_select" class="js-select2" @change='getValue' v-model="table">
                                    <option v-for='item in tableList'>{{ item }}</option>
                           </select>
                                    <div class="dropDownSelect2"></div>
                                </div>
                                <div class="rs-select2--light" v-if="table == '订单信息'">
                                    服务类型：<select class="js-select2" name="time" style="border-radius: 10px; height: 30px" v-model="service_type" @change="get_service">
                                    <option v-for="item in service_List">{{ item }}</option>
                                </select> 订单状态：
                                    <select class="js-select2" v-model="service_status" @change="get_service">
                                        <option v-for="item in status_List">{{ item }}</option>
                                </select> 年份：
                                    <input class="js-select2" type="text" placeholder="全部" style="width: 60px" v-model="service_year" @keyup.enter="get_service">
                                </div>
                                <div class="rs-select2--light" v-if="table == '设备信息'">
                                    服务区域：
                                    <select class="js-select2" name="time" style="border-radius: 10px; height: 30px" v-model="device_location" @change="getdevice">
                                        <option v-for="item in location_List">{{ item }}</option>
                                    </select> 库存状态：
                                    <select class="js-select2" name="time" style="border-radius: 10px; height: 30px" v-model="storage_state" @change="getdevice">
                                        <option v-for="item in storage_state_List">{{ item }}</option>
                                    </select> 设备名：
                                    <input class="js-select2" type="text" placeholder=" " style="width: 60px" v-model="device_name" @keyup.enter="getdevice">
                                </div>
                                <div class="rs-select2--light" v-if="table == '优惠劵信息'">
                                    优惠劵名：<input class="js-select2" type="text" placeholder="" style="width: 60px" v-model="coupon_name" @keyup.enter="getcoupon">
                                </div>
                                <div class="rs-select2--light" v-if="table == '用户信息'">
                                    用户等级：
                                    <select class="js-select2" name="time" style="border-radius: 10px; height: 30px">
                                        <option value="">全部</option>
                                        <option value="">VIP用户</option>
                                        <option value="">普通用户</option>
                                </select> 用户名：
                                    <input class="js-select2" type="text" placeholder="" style="width: 60px">
                                </div>
                                <div class="rs-select2--light" v-if="table == '管理员信息'">
                                    管理员名：<input class="js-select2" type="text" placeholder="" style="width: 60px">
                                </div>
                                <div class="rs-select2--light" v-if="table == '商品信息'" >
                                    商品类型：
                                    <select class="js-select2" name="time" style="border-radius: 10px; height: 30px" v-model="goods_type" @change="getgoods">
                                        <option v-for="item in goods_typeList">{{ item }}</option>
                                </select> 商品名：
                                    <input class="js-select2" type="text" placeholder="" style="width: 60px" v-model="goods_name" @keyup.enter="getgoods">
                                </div>
                                <button @click='Search' class="btn btn-default ripple btn-lg" style="width: 60px; height: 40px; border-radius: 60px">过滤</button>
                                 &nbsp; &nbsp;
                                <button class="btn btn-default ripple btn-lg" style="width: 60px; height: 40px; border-radius: 60px">重置</button>
                            </div>
                            <div class="table-data__tool-right" style="display: flex; align-items: center; width: 200px; justify-content: space-around">
                                <div class="rs-select2--dark rs-select2--sm rs-select2--dark2">
                                    <select class="js-select2" name="type" style="border-radius: 10px; height: 30px">
                                    <option selected="selected">Export</option>
                                    <option value="">Option 1</option>
                                    <option value="">Option 2</option>
                                </select>
                                    <div class="dropDownSelect2"></div>
                                </div>
                                <button id="addInfo" class="btn btn-default ripple btn-lg" style="width: 60px; height: 40px; border-radius: 60px">添加</button>
                                &nbsp; &nbsp;
                                <button id="deleteBatch"  class="btn btn-default ripple btn-lg" style="width: 60px; height: 40px; border-radius: 60px">删除</button>
                                &nbsp; &nbsp;
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table style="border-collapse:collapse; font-family='微软雅黑'">
                                <thead style="height: 60px">
                                    <tr v-if="table=='订单信息'" > 
                                        <th><input type="checkbox" checked name="checkbox_v1" value="version1" onclick="allSelect('checkbox_v1', 'checkbox1')"></th>
                                        <th>订单号</th>
                                        <th>服务设备</th>
                                        <th>服务区域</th>
                                        <th>用户名</th>
                                        <th>商品名</th>
                                        <th>服务类型</th>
                                        <th>购买数量</th>
                                        <th>单价</th>
                                        <th>优惠劵名</th>
                                        <th>优惠劵使用数量</th>
                                        <th>订单时间</th>
                                        <th>订单状态</th>
                                        <th>付款</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-if="table=='设备信息'">
                                        <th><input type="checkbox" checked name="checkbox_v1" value="version1" onclick="allSelect('checkbox_v1', 'checkbox1')"></th>
                                        <th>设备号</th>
                                        <th>设备名</th>
                                        <th>服务区域</th>
                                        <th>库存状态</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-if="table=='优惠劵信息'">
                                        <th><input type="checkbox" checked name="checkbox_v1" value="version1" onclick="allSelect('checkbox_v1', 'checkbox1')"></th>
                                        <th>优惠劵号</th>
                                        <th>优惠劵名</th>
                                        <th>优惠劵类型</th>
                                        <th>优惠劵内容</th>
                                        <th>优惠劵价格</th>
                                        <th>优惠劵等级</th>
                                        <th>优惠劵时限</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-if="table=='用户信息'">
                                        <th><input type="checkbox" checked name="checkbox_v1" value="version1" onclick="allSelect('checkbox_v1', 'checkbox1')"></th>
                                        <th>用户号</th>
                                        <th>用户名</th>
                                        <th>用户等级</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-if="table=='管理员信息'">
                                        <th><input type="checkbox" checked name="checkbox_v1" value="version1" onclick="allSelect('checkbox_v1', 'checkbox1')"></th>
                                        <th>管理员号</th>
                                        <th>管理员名</th>
                                        <th>管理设备</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-if="table=='商品信息'">
                                        <th><input type="checkbox" checked name="checkbox_v1" value="version1" onclick="allSelect('checkbox_v1', 'checkbox1')"></th>
                                        <th>商品号</th>
                                        <th>商品名</th>
                                        <th>商品类型</th>
                                        <th>商品价格</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,index) in tdata" class="table-responsive-content-tr" :class="index%2==0?'bcgcolor2':'bcgcolor1'">
                                        <td>
                                        	<input type="checkbox" checked name="checkbox1" :value="'' + tdata[index].goods_id"  v-if="tdata[index].goods_id!=Null" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">
            	                            <input type="checkbox" checked name="checkbox1" :value="'' + tdata[index].device_id" v-if="tdata[index].device_id!=Null" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">
                                        	<input type="checkbox" checked name="checkbox1" :value="'' + tdata[index].bill_id" v-if="tdata[index].bill_id!=Null" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">
            	                            <input type="checkbox" checked name="checkbox1" :value="'' + tdata[index].coupon_id" v-if="tdata[index].coupon_id!=Null" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">
                                        	<input type="checkbox" checked name="checkbox1" :value="'' + tdata[index].manager_id" v-if="tdata[index].manager_id!=Null" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">
            	                            <input type="checkbox" checked name="checkbox1" :value="'' + tdata[index].user_id" v-if="tdata[index].user_id!=Null" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">
                                        </td>
                                        
                                        <td v-for="data in item" :value="data"  :class="data=='紧缺'||data=='未支付'?'color3':'color4'">{{ data }}</td>
                                    	<td>
                                    		<a class="operation" id="" href="" v-if="tdata[index].goods_id!=Null">修改</a>
                                    		<a class="operation" id="" href="" v-if="tdata[index].device_id!=Null ">修改</a>
                                    		<a class="operation" id="" href="" v-if="tdata[index].coupon_id!=Null">修改</a>
                                    		<lable v-if="tdata[index].bill_id!=Null">无</lable>
                                    		<lable v-if="tdata[index].manager_id!=Null">无</lable>
                                    		<lable v-if="tdata[index].user_id!=Null">无</lable>
                                    	</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--隐藏标签：删除  -->
						<div>
							<div id="hiddenButton" align="center">
								<button id="delete" class="deleteBtn">  
									删除
								</button> 
								<button id="cancel" class="cancelBtn">  
									取消
								</button>
							</div>
						</div>
                    </div>
                </div>
            </div>
        </section>
        
        <script src="../js/Search.js"></script>
        <script src="../js/operate.js"></script>
        <!-- END DATA TABLE-->
        

        <!-- STATISTIC CHART-->
        <section class="statistic-chart">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="" style="font-size: xx-large">统计分析</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-lg-4">
                        <!-- CHART-->
                        <!-- 为 ECharts-柱状图 准备一个定义了宽高的 DOM -->
                        <h3>每日收益柱状图（单位：￥）</h3>
                        <div id="Charts_1" style="width: 400px;height:400px;"></div>
                        <script type="text/javascript">
                            // 基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('Charts_1'));

                            // 指定图表的配置项和数据
                            var option = {
                                xAxis: {
                                    type: 'category',
                                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: [120, 200, 150, 80, 70, 110, 130],
                                    type: 'bar',
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: 'rgba(180, 180, 180, 0.2)'
                                    }
                                }]
                            };

                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                        </script>
                        <!-- END CHART-->
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <!-- TOP CAMPAIGN-->
                        <div class="top-campaign" style="margin-bottom: 60px">
                            <h3 class="title-3 m-b-30">top campaigns</h3>
                            <div class="table-responsive" style="box-shadow: 10px 10px 5px #888888; overflow-x: scroll">
                                <table class="table table-top-campaign">
                                    <tbody style="display: flex; flex-direction: column">
                                        <tr>
                                            <td>1. Australia</td>
                                            <td>$70,261.65</td>
                                        </tr>
                                        <tr>
                                            <td>2. United Kingdom</td>
                                            <td>$46,399.22</td>
                                        </tr>
                                        <tr>
                                            <td>3. Turkey</td>
                                            <td>$35,364.90</td>
                                        </tr>
                                        <tr>
                                            <td>4. Germany</td>
                                            <td>$20,366.96</td>
                                        </tr>
                                        <tr>
                                            <td>5. France</td>
                                            <td>$10,366.96</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- END TOP CAMPAIGN-->
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <!-- CHART PERCENT-->
                        <!-- 为 ECharts-环形图 准备一个定义了宽高的 DOM -->
                        <h3>商品销量对比环形图（单位：数量）</h3>
                        <div id="Charts_2" style="width: 400px;height:400px;"></div>
                        <script type="text/javascript">
                            // 基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('Charts_2'));

                            // 指定图表的配置项和数据
                            var option = {
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    top: '5%',
                                    left: 'center'
                                },
                                series: [{
                                    name: 'Access From',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    itemStyle: {
                                        borderRadius: 10,
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    },
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '40',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [{
                                        value: 1048,
                                        name: 'Search Engine'
                                    }, {
                                        value: 735,
                                        name: 'Direct'
                                    }, {
                                        value: 580,
                                        name: 'Email'
                                    }, {
                                        value: 484,
                                        name: 'Union Ads'
                                    }, {
                                        value: 300,
                                        name: 'Video Ads'
                                    }]
                                }]
                            };

                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                        </script>
                        <!-- END CHART PERCENT-->
                    </div>
                </div>
            </div>
        </section>
        <!-- END STATISTIC CHART-->

        
        
        <section id="app">
            <!-- SEARCHWEATHER-->
            <div class="search_form">
                <div class="form_group">
                    <input type="text" class="input_txt" placeholder="请输入查询的天气，以判断适不适合营业" v-model="city" @keyup.enter="searchWeather" />
                    <button class="input_sub" @click="searchWeather">
                    搜 索
                </button>
                </div>
            </div>
            <ul class="weather_list">
                <li v-for="(item,index) in weatherList" :key="item.date" :style="{transitionDelay:index*100+'ms'}">
                    <div class="info_type">
                        <span class="iconfont">{{ item.type }}</span>
                    </div>
                    <div class="info_temp">
                        <b>{{ item.low}}</b> ~
                        <b>{{ item.high}}</b>

                    </div>
                    <div class="info_date">
                        <span>{{ item.date }}</span>
                    </div>
                </li>
            </ul>
            <!-- END SEARCHWEATHER-->
            <hr class="line-seprate">
        </section>
        
       



    </div>
</body>

</html>